<template>
	<mono-tabbar :active="0">
		<view class="wihtePo" v-for="(item, index) in DataList" :index="index">
			<view class="timePo">
				<view class="dataPo">
					<view>{{ dayjs(item.date).format('M月D日') }}</view>
					<view class="weekPo">{{ item.week }}</view>
				</view>
				<view class="numPo">
					<view class="textPo">
						<view class="chuPo"> 出</view>
						<view class="monery">{{ item.amount }}</view>
					</view>
					<view class="moneryPo">
						<view class="ruPo">入</view>
						<view class="monery">{{ item.income }}</view>
					</view>
				</view>
			</view>
			<view class="imgPo" v-for="(item1, index1) in item.children" :key="index1">
				<view class="iconfont" :class="'icon-' + item1.icon" :style="{
					background: item1.type === 1 ? ' #f9ae3d'
						: '#42b479'
				}"></view>
				<view class="typePo">
					<view>
						<view>{{ item1.title }}</view>
						<view class="timedatePo">{{ dayjs(item1.date).format('mm:ss') }}</view>
					</view>
					<view class="dataPo" :style="{
						color: item1.type === 1 ? ' #f9ae3d'
							: ''
					}">{{ item1.type === 0 ? '-' : '+' }}{{ item1.money }}</view>
				</view>
			</view>
		</view>
		<view class="nonePo">—— 没有更多了 ——</view>
		<!-- 悬浮 -->
		<view class="fag" :style="{ opacity: buttonOpacity }" @click="openPopupFn">
			<text class="iconfont icon-jibiji"></text>记一笔
		</view>
	</mono-tabbar>
	<uv-popup ref="popupRef" closeable mode="bottom" round="10">
		<view class="content">
			<setAccount @confirm="confirm"></setAccount>
		</view>
	</uv-popup>
</template>
<script setup>
import { ref, onUnmounted } from "vue";
import { onPageScroll, onLoad } from "@dcloudio/uni-app";
import setAccount from "./components/setAccount.vue";
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const isScroll = ref(false);
const buttonOpacity = ref('1');
const scrollTimeout = 300; // 滚动超时时间（毫秒），用于判断“一直在滚动”
let scrollTimer; // 定时器变量
const handleScroll = () => {
	buttonOpacity.value = '.7';
	clearTimeout(scrollTimer);
	scrollTimer = setTimeout(() => {
		console.log('结束滚动');
		buttonOpacity.value = '1';
	}, scrollTimeout);
};

onPageScroll(handleScroll);

onUnmounted(() => {
	clearTimeout(scrollTimer); // 组件卸载时清除定时器，防止内存泄漏
});


const popupRef = ref()
const openPopupFn = () => {
	popupRef.value.open()
}
//原始数据
let initList = []
//格式化数据结构
const DataList = ref([])
/**
 * 初始化函数
 */
const init = () => {
	//先拿本地存储月
	const month = uni.getStorageSync('month')
	//如果没有就设置本月为默认值
	if (!month) {
		uni.setStorageSync('month', dayjs().month())
	} else {
		//有就拿本地存储的值和系统对比
		const nowMonth = dayjs().month()
		//如果不一样就更新本地存储的值
		if (Number(month) !== nowMonth) {
			uni.setStorageSync('month', nowMonth)
			//清空详细数据
			uni.removeStorageSync('detailedData')
		}
	}
	initList = uni.getStorageSync('detailedData') || []
	console.time()
	DataList.value = formatTransactions(initList)
	console.timeEnd()
}
onLoad(() => {
	//添加模拟数据
	console.log("!uni.getStorageSync('detailedData').length:", !uni.getStorageSync('detailedData').length);
	if (!uni.getStorageSync('detailedData').length) {
		const a = [
			{
				"type": 0,
				"date": "2025-04-24 15:42:19",
				"money": "1",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 0,
				"date": "2025-04-24 15:42:19",
				"money": "200.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 1,
				"date": "2025-04-24 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 1,
				"date": "2025-04-24 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 0,
				"date": "2025-04-23 15:42:19",
				"money": "1.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 1,
				"date": "2025-04-23 15:42:19",
				"money": "200.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 0,
				"date": "2025-04-23 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 1,
				"date": "2025-04-23 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 0,
				"date": "2025-04-22 15:42:19",
				"money": "1.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 0,
				"date": "2025-04-22 15:42:19",
				"money": "200.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 1,
				"date": "2025-04-22 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 1,
				"date": "2025-04-22 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 1,
				"date": "2025-04-21 15:42:19",
				"money": "1.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 0,
				"date": "2025-04-21 15:42:19",
				"money": "200.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 1,
				"date": "2025-04-21 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 0,
				"date": "2025-04-21 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 1,
				"date": "2025-04-21 15:42:19",
				"money": "1.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 0,
				"date": "2025-04-21 15:42:19",
				"money": "200.11",
				"icon": "gouwu",
				"title": "购物"
			},
			{
				"type": 1,
				"date": "2025-04-21 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
			{
				"type": 0,
				"date": "2025-04-21 15:42:19",
				"money": "100.11",
				"icon": "canyin",
				"title": "餐饮"
			},
		]
		uni.setStorageSync('detailedData', a)
	}
	init()
})


const formatTransactions = (transactions) => {
	if (!Array.isArray(transactions) || transactions.length === 0) return [];
	uni.showToast({
		title: '加载中',
		icon: 'loading'
	})
	const today = dayjs().format('YYYY-MM-DD');
	const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');

	const dateMap = {};
	transactions.forEach(transaction => {
		const date = dayjs(transaction.date).format('YYYY-MM-DD'); // 提取日期字符串，
		if (!dateMap[date]) {
			// 如果该日期条目不存在，则创建新条目
			dateMap[date] = {
				date,
				amount: 0, // 支出金额
				income: 0, // 收入金额
				children: [], // 交易记录
				week: dayjs(date).format('dddd')
			};
			dateMap[date].week = date === today ? '今天'
				: date === yesterday ? '昨天'
					: dateMap[date].week;
		}
		const entry = dateMap[date];
		entry.children.push(transaction); // 将当前交易记录添加到 children 数组中

		if (transaction.type === 0) {
			entry.amount += parseFloat(transaction.money); // 更新支出金额
		} else if (transaction.type === 1) {
			entry.income += parseFloat(transaction.money); // 更新收入金额
		}
	});
	uni.hideToast()
	return Object.values(dateMap).map(group => ({
		...group,
		amount: parseFloat(group.amount).toFixed(2), // 在返回前格式化
		income: parseFloat(group.income).toFixed(2) // 在返回前格式化
	}));
};
const confirm = (e) => {
	console.log("e:", e);
	initList.unshift(e)
	uni.setStorageSync('detailedData', initList)
	popupRef.value.close()
	//重新格式化数据结构并更新视图
	DataList.value = formatTransactions(initList)
	uni.showToast({
		title: '已记一笔',
		icon: 'success'
	})
}
</script>
<style lang="scss" scoped>
page {
	background: #f2f2f2;
}

.fag {
	position: fixed;
	right: 40rpx;
	bottom: 180rpx;
	z-index: 888;
	border-radius: 100rpx;
	padding: 26rpx 36rpx;
	color: #42b479;
	background-color: #ffffff;
	//阴影
	box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .2);
}

.wihtePo {
	width: 94%;
	background: #fff;
	margin: 30rpx auto;
	border-radius: 12rpx;
	padding: 0rpx 0rpx 40rpx 0rpx;

	.timePo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		background: #fafafa;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;

		.dataPo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #545454;

			.weekPo {
				margin-left: 12rpx;
			}
		}

		.numPo {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.textPo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.chuPo {
					background: #f2f2f2;
					padding: 6rpx;
					font-size: 24rpx;
					color: #8a8a8a;
				}

				.monery {
					padding: 6rpx;
					font-size: 26rpx;
					margin-left: 6rpx;
					font-weight: 600;
					color: #191919;
				}
			}

			.moneryPo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;

				.ruPo {
					background: #f2f2f2;
					padding: 6rpx;
					font-size: 24rpx;
					color: #8a8a8a;
				}

				.monery {
					padding: 6rpx;
					font-size: 26rpx;
					margin-left: 6rpx;
					font-weight: 600;
					color: #191919;
				}
			}
		}
	}

	.imgPo {
		display: flex;
		align-items: start;
		justify-content: space-between;
		padding: 40rpx 0 0rpx 40rpx;

		.iconfont {
			font-size: 40rpx;
			border-radius: 50%;
			padding: 20rpx;
			color: #ffffff;
		}

		.typePo {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #ccc;
			padding-bottom: 20rpx;
			padding-right: 40rpx;
			margin-left: 40rpx;
			color: #676767;
			font-size: 24rpx;

			.timedatePo {
				margin-top: 12rpx;
				color: #b7b7b7;
			}

			.dataPo {
				font-size: 30rpx;
				font-weight: 600;
				color: #191919;
			}
		}
	}

	.imgPo:last-child {
		.typePo {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: none;
			padding-bottom: 0rpx;
			padding-right: 40rpx;
			margin-left: 40rpx;
		}
	}
}

.nonePo {
	padding: 60rpx 0;
	text-align: center;
	font-size: 28rpx;
	color: #ccc;
}
</style>
